<script setup>

</script>

<template>

  <div class="content">
    <div class="left">地区：</div>
    <ul class="region">
      <li class="active">全部</li>
      <li>乌鲁木齐市</li>
      <li>天山区</li>
      <li>新市区</li>
      <li>米东区</li>
      <li>昌吉区</li>
      <li>沙依巴克区</li>
      <li>克拉玛依市</li>
      <li>吐鲁番市</li>
      <li>哈密市</li>
      <li>和田地区</li>
      <li>阿克苏市</li>
      <li>喀什地区</li>
      <li>塔城地区</li>
      <li>阿勒泰地区</li>
      <li>石河子市</li>
      <li>阿拉尔市</li>
      <li>五家渠市</li>
      <li>图木舒克市</li>
      <li>巴音郭楞蒙古自治州</li>
      <li>博尔塔拉蒙古自治州</li>
    </ul>
  </div>

</template>

<style scoped lang="scss">
.content {
  display: flex;
  //align-items: center;
  margin-bottom: 20px;
  .left {
    margin-right: 10px;
    width: 100px;
  }

  .region {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;

    li {
      margin-right: 15px;
      margin-bottom: 10px;
      cursor: pointer;
      color: #7f7f7f;

      &.active {
        color: #03b8ff;
      }
    }

    li:hover {
      color: #03b8ff;
    }
  }
}
</style>